import { Button, Input } from 'antd'
import { Row } from 'components/lib'
import { TaskTypeSelect } from 'components/task-type-select'
import { UserSelect } from 'components/user-select'
import React from 'react'
import { useSetSearchUrlParams } from 'utils/url'
import { useTasksSearchParams } from './util'

export const SearchPanel = () => {
  const searchParams = useTasksSearchParams() 
  const setSearchParams = useSetSearchUrlParams()
  const reset = () => {
    setSearchParams({
      typeId: undefined,
      processorId: undefined,
      tagId: undefined,
      name: undefined
    })
  }

  return <Row marginBottom={4} gap={true}>
    <Input style={{width: '20rem'}} placeholder={'任务名称'}
      value={searchParams.name}
      onChange={evt => setSearchParams({...searchParams, name: evt.target.value})}
    />
    <UserSelect defaultOptionName={'经办人'}
      value={searchParams.processorId}
      onChange={(value) => setSearchParams({processorId: value}) }
    />
    <TaskTypeSelect defaultOptionName={'类型'}
      value={searchParams.typeId}
      onChange={value => setSearchParams({typeId: value})}
    />
    <Button onClick={reset} >清空筛选条件</Button>
  </Row>

}